<template>
	<view id="tmpl">
		<!-- <hd-message-bar :index='2' @on_change="OnChange"></hd-message-bar> -->
		<view style="margin-top: 15px;">
			<view class="list" v-for="(item,index) in news" :key="index">
				<view class="item">
					<view class="detial">
						<view class="title">
							<text class="nickname">{{item.createBy}}</text> 发布通报
						</view>
						<view class="info">
							<view class='datetime'>
								<text>{{item.createTime}}</text>
							</view>
						</view>
					</view>
					<view class="content" v-html="item.noticeContent"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				news: [],
			}
		},
		onReachBottom() { //uniapp 监听下拉加载生命周期
			scrollDownPage();
		},
		methods: {
			scrollDownPage: function() {
				let _this = this;
				this.pageNum += 1;
				let url = "/"+_this.pageNum+"/"+ _this.pageSize;
				this.$api.periodical(url).then((res) => {
					_this.news.push(res.data.rows)
				})
			},
			onLoad: function() {
				let _this = this
				this.$_if.Initialize(this);
				let url = "/"+_this.pageNum+"/"+ _this.pageSize;
				this.$api.periodical(url).then((res) => {
					_this.news = res.data.rows;
				})
			},
			onShow: function() {

			},
			OnChange(item) {
				this.GoToPage('message', item.url);
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $background-color-2;
		// padding-top: calc(var(--status-bar-height) + 64upx);
	}

	.list {
		margin-bottom: 20px;

		.group {
			@extend .container-2;

			.item {
				box-shadow: 0 0 5px rgba(0, 0, 0, .1);
				border-radius: 10upx;
			}

			.datetime {
				font-size: $uni-font-size-sm;
				color: rgba(66, 66, 66, .7);
				text-align: center;
				padding: 10upx 0;
			}

			.main {
				background-color: $background-color-1;
				border-top-left-radius: 10upx;
				border-top-right-radius: 10upx;
				width: 100%;
				height: 200upx;

				image {
					border-top-left-radius: 10upx;
					border-top-right-radius: 10upx;
					@extend .icon-image-size-full;
					height: 200upx;
				}

				.detail {
					position: absolute;
					width: calc(100% - 19upx);
					height: 200upx;
					color: $font-color-1;
					margin-top: -205upx;
					background-image: linear-gradient(bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));

					.title {
						padding: 20upx;
						margin-top: 130upx;
						font-size: $uni-font-size-base;
					}
				}
			}

			.sub-list {
				background-color: $background-color-1;
				border-bottom-left-radius: 10upx;
				border-bottom-right-radius: 10upx;
			}

			.sub-item {
				padding: 20upx;
				@extend .flex-between;
				border-top: solid 1px #e5e5e5;

				.title {
					font-size: $uni-font-size-base;
					color: #424242;
				}

				.thumb {
					width: 100upx;
					height: 100upx;

					image {
						@extend .icon-image-size-full;
					}
				}
			}

		}
	}

	.list {
		padding-bottom: 0;


		.item {
			position: relative;
			background-color: $background-color-1;
			padding: 20upx;
			margin-top: 10upx;

			.detial {
				border-bottom: solid 1px #e0e0e0;

				.title {
					font-size: $font-size-title-2;
					color: $font-color-2;
					padding: 20upx 0;
					padding-top: 0;

					.nickname {
						color: #4e0606;
						padding: 0 10upx;
					}
				}

				.info {
					@extend .flex-between;
					font-size: $uni-font-size-sm;
					padding-bottom: 10upx;
				}

				.datetime {
					color: $font-color-4;
					position: absolute;
					right: 30rpx;
					top: 40rpx;
				}
			}

			.content {
				padding: 5upx;
				padding-top: 10upx;
			}
		}
	}

	.collection {
		position: absolute;
		padding: 12upx 35upx;
		color: $font-color-1;
		background-color: #57a9be;
		display: inline;
		right: 30upx;
		border-radius: 10upx;
		margin-top: -110upx;
		font-size: $uni-font-size-base;
	}
</style>
